html {
  font-size: 16px;
  @media (min-width: 768px) {
	font-size: 13px;
  }
  @media (min-width: 868px) {
	font-size: 14px;
  }
  @media (min-width: 969px) {
	font-size: 15px;
  }
  @media (min-width: 1200px) {
	font-size: 16px;
  }
}

p, span, a, div {
  text-align: justify;
}

img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@text-color-white: #FFFFFF; //字体颜色-白色
@text-color-black: #000000; //字体颜色-白色
@text-color-croci: #BE9566; //标题下英文
@text-color-main-black: #222222; //正文字体颜色
@text-color-gray: #888888; //字体颜色-灰色
@bg-main-color: #F0F2F5; //正文背景色
@bg-main-color2: #F8F8F8; //正文背景色
@bg-main-white: #ffffff; //正文背景色
@header-bg-color: #181818; //标题背景色
@header-bg-color-two: rgba(24, 24, 24, 0.7); //标题背景色
@header-bg-hover-color: rgba(24, 24, 24, 0.49); //标题背景色
@header-bg-active-color: rgba(24, 24, 24, 0.84); //标题背景色
@header-text-hover-color: #b4b4b4; //标题字体鼠标悬浮色
@header-text-active-color: #BE9667; //标题字体选中色
.w-zhengti {
  @media (min-width: 1280px) {
	width: 1280px;
  }
  @media (max-width: 1279px) {
	width: 100%;
  }
}

.cen {
  @media (max-width: 1279px) {
	text-align: center !important;
  }
}

//整体宽度
.w-main {
  @media (min-width: 1280px) {
	width: 980px;
  }
  @media (max-width: 1279px) {
	width: 83.333333%;
  }
}

.padd {
  @media (max-width: 1279px) {
	padding: 3rem 30px;
  }
}

//内容宽度
//设置span最大显示行数
.span-ellipsis(@clamp:4) {
  display: -webkit-box;
  -webkit-line-clamp: @clamp;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

//@import "bootstrap.less";//引入bootstrap样式
.cu-po {
  cursor: pointer;
}

.pc, .mobile, #check {
  display: none !important;
}

@media (min-width: 769px) {
  .pc {
	display: flex !important;
  }
}

//方法整理
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-8 {
  @media (min-width: 769px) {
	width: 83.33333333%;
  }
  @media (min-width: 1600px) {
	flex: 0 0 auto;
	width: 66.66666667%;
  }
}

.h-100 {
  height: 100%;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-2 {
  .px(0.5rem, 0.5rem)
}

.px-3 {
  .px(1rem, 1rem)
}

.pb-4 {
  padding-bottom: 1.5rem;
}

.top-0 {
  top: 0;
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw);
  @media (min-width: 1200px) {
	font-size: 2.5rem;
  }
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw);
  @media (min-width: 1200px) {
	font-size: 2rem;
  }
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw);
  @media (min-width: 1200px) {
	font-size: 1.75rem;
  }
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw);
  @media (min-width: 1200px) {
	font-size: 1.5rem;
  }
}

.fs-5 {
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: @text-color-black;
  cursor: pointer;
}

.px(@l,@r) {
  padding-left: @l;
  padding-right: @r;
}

.py(@t,@b) {
  padding-top: @t;
  padding-bottom: @b;
}

.my(@t,@b) {
  margin-top: @t;
  margin-bottom: @b;
}

//flex方法
.flex(@d-flex:unset,@flex-direction:unset,@j-content:normal,@a-items:normal,@a-self:unset,@grow:0,@wrap:unset,@z-index:unset,@position:unset,@position-top:unset,@position-right:unset,@position-bottom:unset,@position-left:unset) {
  display: @d-flex;
  flex-direction: @flex-direction;
  justify-content: @j-content;
  align-items: @a-items;
  align-self: @a-self;
  flex-grow: @grow;
  flex-wrap: @wrap;
  z-index: @z-index;
  position: @position;
  top: @position-top;
  bottom: @position-bottom;
  left: @position-left;
  right: @position-right;
}

.header {
  justify-content: center;
  background-color: @header-bg-color;
  width: 100%;

  & > div {
	.flex(@d-flex: flex,@j-content: space-between,@position: relative);
	.w-zhengti;
	height: 64px;
	color: @text-color-white;
	@media (min-width: 1280px) {
	  padding-right: 182px;
	  padding-left: 70px;
	}
	@media (max-width: 1279px) {
	  padding-left: 1rem;
	  padding-right: 1rem;
	}

	img {
	  width: 142px;
	  height: auto;
	  .my(1rem, 1rem);
	  max-width: 16rem;
	}

	ul { //一级菜单样式
	  .flex(@d-flex: flex,@j-content: space-around);
	  @media (min-width: 1280px) {
		width: 629px;
	  }

	  li {
		.cu-po;
		.px-2;
		.flex(@d-flex: flex,@a-items: center,@position: relative,@j-content: center,@grow: 1);

		a {
		  color: @text-color-white;
		  text-decoration: none;
		}

		ul { //二级菜单样式
		  .flex(@d-flex: none,@position: absolute,@position-top: 100%,@position-left: 0,@z-index: 10);
		  width: 181px;
		  background-color: @header-bg-color-two;

		  li {
			.py-2;
			.px-3;

			a {
			  .flex(@d-flex: flex,@flex-direction: row,@j-content: space-between);
			  width: 100%;
			  color: @header-text-hover-color;
			}

			ul {
			  .top-0;
			  @media (min-width: 1280px) {
				left: 100%;
			  }
			  @media (max-width: 1279px) {
				right: 100%;
				left: unset;
			  }
			  width: max-content;

			  li {
				width: 100%;
			  }
			}
		  }
		}

		&:hover {
		  a {
			color: @header-text-hover-color;
		  }

		  ul {
			display: block;

			li {
			  ul {
				display: none;
			  }

			  &:hover {
				background-color: @header-bg-hover-color;

				ul {
				  display: block;
				}

				a {
				  color: @text-color-white;
				}
			  }
			}
		  }
		}
	  }

	  .active {
		background-color: @header-bg-active-color;

		a {
		  color: @header-text-active-color;
		}
	  }
	}
  }
}

.footer {
  background-color: @header-bg-color;
  display: flex;
  justify-content: center;

  & > div {
	@media (min-width: 1280px) {
	  .w-zhengti;
	  height: 344px;
	}
	@media (max-width: 1279px) {
	  width: 100%;
	  padding: 1rem;
	}
	background: url("/static/index/img/footer.png") no-repeat;
	background-size: 100% 100%;
	.flex(@d-flex: flex,@flex-direction: column,@j-content: space-evenly);
	color: @text-color-white;

	& > div:first-child {
	  .flex(@d-flex: flex,@j-content: space-between);
	  //.py(3rem,3rem);
	  @media (min-width: 1280px) {
		.px(60px, 60px);
	  }
	  width: 100%;

	  ul {
		//.flex(@grow: 1);
		@media (max-width: 128079) {
		  flex-grow: 1;
		  padding-right: 1rem;
		}
		list-style: none;

		li:first-child {
		  color: @text-color-white;
		}

		li:nth-child(2) {
		  padding-top: 0.5rem;
		}

		li {
		  padding-top: 0.25rem;
		  padding-bottom: 0.25rem;
		  color: @text-color-gray;
		  //微信，新浪小图标
		  img {
			.col-2;
			margin: 0 0.5rem 0 0;
		  }
		}
	  }

	  .lianxi {
		a {
		  color: @text-color-gray;
		}
	  }

	  .nav { //底部菜单样式
		.flex(@d-flex: flex,@flex-direction: column);
		@media (min-width: 1280px) {
		  width: 190px;
		}
		@media (max-width: 1279px) {
		  flex-shrink: 0;
		  padding-right: 3rem;
		}

		li {
		  .py-2;

		  & > a {
			color: @text-color-white;
		  }

		  &:hover {
			color: @header-text-hover-color;
		  }
		}
	  }

	  .guanzhu {
		.li_img {
		  display: flex;

		  & > div, & > a {
			//flex-grow: 1;
			//padding: 1rem;
			img {
			  width: 3rem;
			}
		  }

		  & > div {
			display: flex;
			justify-content: center;
			position: relative;

			& > div {
			  position: absolute;
			  display: none;
			  bottom: 4rem;
			  width: 15rem;
			  height: 15rem;
			  background-color: @bg-main-white;
			  border-radius: 0.5rem;
			  box-shadow: 0 0 20px hsla(#000000, 30%);
			  animation: danru 1s;

			  img {
				width: 100%;
			  }

			  @keyframes danru {
				from,
				to {
				  animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
				}
				0% {
				  opacity: 0;
				  transform: translateY(-50%);
				}
				100% {
				  opacity: 1;
				  transform: translateY(0);
				}
			  }
			}

			&:hover {
			  & > div {
				display: block;
				z-index: 9999999999999
			  }
			}
		  }

		}
	  }

	  & > img {
		align-self: flex-end;
		width: 230px;
	  }
	}

	& > div:last-child {
	  border-top: 2px solid @text-color-main-black;
	  padding-top: 1rem;
	  width: 100%;
	  text-align: center;
	  color: @text-color-gray;
	  border-top-color: rgba(255, 255, 255, 0.1) !important;
	}
  }
}

.title {
  .title {
	.flex(@d-flex: flex,@flex-direction: column,@a-items: center);

	span:first-child {
	  .fs-2;
	}

	span:nth-child(2) {
	  .fs-4;
	  color: @text-color-croci;
	}

	div {
	  margin-top: 1.5rem;
	  width: 2rem;
	  border-top: 3px solid @text-color-gray;
	}
  }
}

.mains {
  .flex(@d-flex: flex,@j-content: center);
  width: 100%;
  margin-top: 3rem;
}

//轮播图样式，设置轮播内显示宽度
.maian_sweiper(@w) {
  &:extend(.mains);
  .swiper {
	.w-main;
	.py(3rem, 3rem);

	.swiper-slide {
	  .flex(@d-flex: flex,@flex-direction: row,@wrap:wrap,@j-content: space-around);

	  div {
		padding: 1rem;
		width: @w;

		img {
		  border-radius: 0.3rem;
		}
	  }
	}

	.swiper-pagination {
	  .swiper-pagination;
	}
  ;
  }
}

//轮播图分页器样式
.swiper-pagination {
  .swiper-pagination-bullet {
	width: 0.8rem;
	height: 0.8rem;
  }

  .swiper-pagination-bullet-active, .swiper-pagination-bullet-active-main {
	transform: scale(1);
	background: -webkit-radial-gradient(circle closest-side, @text-color-white 60%, @text-color-croci 100%);
  }

  .swiper-pagination-bullet-active-next, .swiper-pagination-bullet-active-next-next, .swiper-pagination-bullet-active-prev, .swiper-pagination-bullet-active-prev-prev {
	transform: scale(0.3);
  }
}

body {
  background-color: @bg-main-color;
}

.box {
  .title;
  .py(3rem, 3rem);
}

.box:nth-child(2n+1) {
  background-color: @bg-main-color2;
}

//公司定位
.index {
  .box_main {
	display: flex;
	justify-content: center;
	padding: 0;

	& > div {
	  position: relative;
	  @media (min-width: 1280px) {
		.w-zhengti;
	  }
	  @media (max-width: 1279px) {
		width: 100%;
	  }
	}

	.swiper {
	  height: 39.75rem;

	  .swiper-wrapper {
		height: 100%;

		.swiper-slide {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  overflow: hidden;
		  position: relative;

		  img {
			width: 100%;
			transition: all 2s;
			max-width: 200%;
			position: absolute;
		  }

		  &:hover {
			img {
			  width: 150%;
			}
		  }
		}
	  }

	  .swiper-pagination {
		.flex(@d-flex: flex,@a-items: center,@j-content: flex-start,@position: absolute,@position-bottom: 0,@position-left: 0,@z-index: 2);
		height: 80px;
		@media (min-width: 1280px) {
		  width: 1128px;
		}
		@media (max-width: 1279px) {
		  width: calc(100% - 152px);
		}
		background-color: hsla(@text-color-black, 50%);
		color: @text-color-white;

		.swiper-pagination-custom {
		  margin: 0.5rem 1rem 0.5rem 1rem;
		  width: fit-content;
		  cursor: pointer;
		}

		.swiper-pagination-custom-active {
		  margin-top: 1.3rem;
		  background-color: @text-color-croci;
		  width: 7rem;
		  height: 0.2rem;
		  border-radius: 0.2rem;
		}

		.swiper-pagination-custom-active-text {
		  position: absolute;
		  right: 2rem;
		  color: @text-color-white;
		}
	  }
	}

	.div_right {
	  .flex(@d-flex: flex,@j-content: space-between,@position: absolute,@position-right: 0,@position-top: 0,@position-bottom: 0,@z-index: 2);
	  width: 150px;

	  & > div {
		height: 100%;
		width: 74px;
		background-color: hsla(@text-color-black, 50%);
	  }

	  & > .right {
		.flex(@d-flex: flex,@a-items: flex-end);
		color: @text-color-white;

		& > div {
		  .cu-po;
		  writing-mode: vertical-rl;
		  .flex(@d-flex: flex,@a-items: center);
		  width: 100%;
		  .py(3rem, 3rem);
		  background-color: @text-color-croci;
		  position: relative;

		  & > i {
			display: inline-block;
			transform: rotate(90deg);
			margin-top: 1rem;
			font-size: 2rem;
		  }

		  img {
			position: absolute;
			top: 0;
			right: 0;
			width: 13rem;
			height: 13rem;
			animation: left 1s;
			display: none;
		  }

		  &:hover {
			img {
			  display: block;
			}
		  }

		  @keyframes left {
			0% {
			  opacity: 0;
			  transform: translateX(100%);
			}
			100% {
			  opacity: 1;
			  transform: translateX(0%);
			}
		  }
		}
	  }

	}
  }

  .box1 {
	.main:extend(.mains) {
	  .flex(@d-flex: flex,@j-content: center);
	  width: 100%;
	  .py(3rem, 3rem);
	  margin-top: 3rem;

	  span {
		.w-main;
		color: @text-color-main-black;
	  }
	}
  }

  .box2 {
	.main:extend(.mains) {
	  .flex(@d-flex: flex,@flex-direction: row,@j-content: center);
	  padding-top: 3rem;
	  margin-top: 3rem;

	  .con-1 {
		.flex(@d-flex: flex,@flex-direction: row,@j-content: space-between);
		.w-main;

		div {
		  .flex(@d-flex: flex,@flex-direction: column,@a-items: center,@j-content: space-between);
		  .cu-po;
		  width: 143px;

		  img {
			width: 34px;
		  }

		  span {
			margin-top: 1rem;
		  }

		  &:hover {
			color: @header-text-active-color;
		  }
		}
	  }
	}
  }

  .box3 {
	.main:extend(.mains) {
	  .flex(@d-flex: flex,@flex-direction: row,@j-content: center);
	  padding-top: 3rem;
	  margin-top: 3rem;

	  .con-1 {
		.flex(@d-flex: flex,@flex-direction: row,@j-content: space-between);
		.w-main;

		div {
		  .flex(@d-flex: flex,@flex-direction: column,@a-items: center,@j-content: space-between);
		  .cu-po;
		  width: 143px;

		  img {
			width: 34px;
		  }

		  span {
			margin-top: 0.5rem;
		  }

		  span:nth-child(2) {
			color: @text-color-croci;
			.fs-4;
			margin-top: 1rem;
		  }

		  &:hover {
			color: @header-text-active-color;
		  }
		}
	  }
	}
  }

  .box4 {
	.main:extend(.mains) {
	  .data-list {
		.flex(@d-flex: flex,@flex-direction: row,@wrap: wrap,@j-content: space-around);
		.w-main;

		.list-item {
		  .col-4;
		  padding: 1rem;

		  & > div {
			border-radius: 0.3rem;
			.flex(@d-flex: flex,@flex-direction: column,@a-items: flex-start);
			background-color: @bg-main-white;

			.img {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 100%;
			  border-top-right-radius: 0.3rem;
			  border-top-left-radius: 0.3rem;
			  @media (min-width: 768px) {
				max-height: 10rem;
			  }
			  @media (min-width: 969px) {
				max-height: 12rem;
			  }
			  overflow: hidden;

			  img {
				width: 100%;
				border-top-right-radius: 0.3rem;
				border-top-left-radius: 0.3rem;
				transition: all 2s;
			  }

			  &:hover {
				img {
				  width: 150%;
				  height: 150%;
				}
			  }
			}

			& > .title {
			  padding-left: 1rem;
			  color: @text-color-black;
			  .py(1rem, 1rem);

			  & > span {
				.fs-5;
			  }
			}

			& > span {
			  .span-ellipsis;
			  padding-left: 1rem;
			  padding-right: 1rem;
			  margin-bottom: 1.5rem;
			  color: @text-color-gray;
			}

			&:hover {
			  box-shadow: 0 0 20px hsla(#000000, 20%);
			  transform: translateY(-8px);
			}
		  }
		}
	  }
	}
  }

  .box5 {
	.main:extend(.mains) {
	  .swiper {
		.w-main;
		.py(3rem, 3rem);

		.swiper-slide {
		  .flex(@d-flex: flex,@j-content: space-around,@a-items: center);

		  & > a {
			.col-5;
			display: flex;
			justify-content: center;
			align-items: center;
			max-height: 17rem;
			overflow: hidden;
			border-radius: 0.3rem;

			img {
			  width: 100%;
			  box-shadow: 0 0 10px hsla(black, 30%);
			  border-radius: 0.3rem;
			  transition: all 2s;
			  object-fit: fill;
			}

			&:hover {

			  img {
				width: 150%;
				height: 150%;
			  }
			}
		  }

		  div {
			.flex(@d-flex: flex,@flex-direction: column);
			.col-5;

			span {
			  color: @text-color-gray;
			}

			& > .title {
			  & > span {
				color: @text-color-black;
				.fs-5;
				.py(1rem, 1rem);
			  }
			}

			& > .desc {
			  .span-ellipsis(5);
			  margin-bottom: 1rem;
			}

			div {
			  .flex(@d-flex: flex,@flex-direction: row,@wrap:nowrap);
			  .cu-po;
			  color: @text-color-croci;

			  span {
				color: @text-color-croci;
				padding-right: 0.5rem;
			  }
			}
		  }
		}

		.swiper-pagination {
		  .swiper-pagination;
		}
	  ;
	  }
	}
  }

  .box6 {
	.main:extend(.mains) {
	  background: url("/static/index/img/index/box6_bg.png") no-repeat;
	  background-size: 100% 100%;
	  /*height: 40rem;*/
	  padding-bottom: 0;
	  display: flex;
	  justify-content: center;

	  div {
		.w-main;
		.flex(@d-flex: flex,@flex-direction: row,@j-content: space-evenly,@wrap:wrap);
		height: fit-content;
		margin-top: 3rem;
		margin-bottom: 3rem;

		img {
		  margin: 1rem;
		  height: auto;
		  max-width: fit-content;
		}
	  }
	}
  }
}

//关于我们
.about_content {
  .box1 {
	.main {
	  &:extend(.mains);
	  text-align: justify;

	  div {
		.flex(@d-flex: flex,@flex-direction: column,@a-items:center);
		.w-zhengti;

		& > .title {
		  color: @text-color-croci;
		  .py(0rem, 3rem);
		  font-size: 1rem;
		}

		@media (max-width: 468px) {
		  .word {
			padding: 0 30px;
		  }
		}

		div {
		  .py(3rem, 3rem);
		  margin: 30px 0;
		  color: @text-color-main-black;
		  //设置换行
		  white-space: pre-line;
		  word-wrap: break-word;
		  font-size: 1rem;
		}
	  }
	}
  }

  .box2 {
	.main {
	  .maian_sweiper(@w:50%);

	  .swiper {
		.swiper-slide {
		  justify-content: space-between;
		}
	  }
	}
  }

  .box3 {
	.main {
	  .maian_sweiper(@w:33.33333333%)
	}
  }
}

//核心IP产品
.kernel_content {
  .main {
	&:extend(.mains);

	.data-list {
	  .w-main;

	  div {
		.flex(@d-flex: flex,@flex-direction: row-reverse);

		&:nth-child(2n+1) {
		  .flex(@d-flex: flex,@flex-direction: row);
		}

		div {
		  .col-6;
		  background-color: @bg-main-color;
		  @media (max-width: 1279px) {
			display: flex;
			align-items: center;
		  }

		  &:nth-child(2n+1) {
			background-color: @bg-main-color2;
			padding: 3rem;
		  }
		}

		.left {
		  .flex(@d-flex: flex,@flex-direction: column,@a-items: flex-start);

		  & > .title {
			.fs-4;
			.py(1rem, 1rem);
			color: @text-color-black
		  }

		  & > span {
			.span-ellipsis;
			color: @text-color-gray;
		  }

		  & > .pc_btn {
			.flex(@d-flex: flex,@flex-direction: row,@j-content: space-between);
			.my(1rem, 1rem);
			.px(0.5rem, 0.5rem);
			.py(0.25rem, 0.25rem);
			width: max-content;
			color: @text-color-white;
			background-color: @header-text-active-color;

			&:hover > span, &:hover > i {
			  animation: right 1s;
			}

			@keyframes right {
			  0% {
				transform: translateX(0);
			  }
			  25% {
				transform: translateX(0.3rem);
			  }
			  50% {
				transform: translateX(0);
			  }
			  75% {
				transform: translateX(0.3rem);
			  }
			  100% {
				transform: translateX(0);
			  }
			}

		  }
		}

		.right {
		  .a-img {
			width: 100%;
			height: 20rem;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
			  transition: 2s;
			}

			&:hover {
			  img {
				width: 150%;
			  }
			}
		  }
		}
	  }
	}
  }
}

//案例展示备份2
.case_content {
  display: flex;
  justify-content: center;
  background-color: @bg-main-color2;

  .case_box {
	.w-zhengti;
	padding-bottom: 3rem;

	.case_title {
	  .flex(@d-flex: flex,@flex-direction: column,@a-items: center);
	  text-align: center;
	  .py(3rem, 3rem);

	  span {
		.col-6;
		color: @text-color-main-black;
	  }

	  span:first-child {
		.fs-4;
		.py(1rem, 1rem);
		color: @text-color-croci;
	  }
	}

	.main {
	  .flex(@d-flex: flex,@j-content: center);

	  .data-list {
		.flex(@d-flex: flex,@flex-direction: row,@wrap: wrap,@j-content: center);
		.w-main;

		div {
		  .px(0.5rem, 0.5rem);
		  padding-bottom: 3rem;
		  .col-4;

		  & > div {
			background-color: @bg-main-white;
			.flex(@d-flex: flex,@flex-direction: column);
			border-radius: 0.3rem;
			padding: 0;
			width: 100%;

			img {
			  border-radius: 0;
			}

			span {
			  .px(1.5rem, 1.5rem);
			  margin-bottom: 2rem;
			  .span-ellipsis;
			}

			& > .title {
			  color: @text-color-black;
			  .fs-5;
			  padding: 1.5rem 1.5rem 1.5rem 1rem;
			}

			&:hover {
			  box-shadow: 0 1px 20px @text-color-gray;
			  transform: translateY(-8px);
			}
		  }
		}
	  }
	}
  }
}

//案例详情
.casedetails {
  .case_top {
	.flex(@d-flex: flex,@flex-direction: column,@a-items: center);
	background-color: @header-bg-color;
	color: @text-color-white;

	div:first-child {
	  .w-zhengti;
	  .flex(@d-flex: flex,@position: relative,@j-content: center,@a-items: center);

	  span {
		.fs-1;
		position: absolute;
	  }
	}

	p {
	  .w-main;
	  .py(3rem, 3rem);
	  text-align: center;
	}
  }

  .box1 {
	background-color: @bg-main-color2;

	.main {
	  .flex(@d-flex: flex,@j-content: center);
	  .py(3rem, 3rem);

	  .data-list {
		.w-main;
		.flex(@d-flex: flex,@wrap:wrap);

		.data-item {
		  .col-6;
		  .px(1rem, 1rem);
		  .py(1.5rem, 1.5rem);

		  & > div {
			.flex(@d-flex: flex,@flex-direction: column);
			border-radius: 0.3rem;
			background-color: @bg-main-white;
			box-shadow: 0 0 3px -2px @text-color-gray;

			.img {
			  position: relative;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  overflow: hidden;
			  max-height: 22.4rem;
			  border-top-left-radius: 0.3rem;
			  border-top-right-radius: 0.3rem;

			  img {
				border-top-left-radius: 0.3rem;
				border-top-right-radius: 0.3rem;
				transition: width 2s;

				&:hover {
				  width: 150%;
				}
			  }
			}

			span, i {
			  .px(1rem, 1rem);
			}

			& > .title {
			  .fs-5;
			  display: flex;
			  align-items: self-start;
			  color: @text-color-black;
			  .py(1.5rem, 1.5rem);
			  .px(1rem, 1rem);
			}

			span {
			  .span-ellipsis;
			  color: @text-color-gray;
			}

			i {
			  .fs-1;
			  text-align: end;
			  .py(1rem, 1rem);
			  color: @text-color-croci;
			}

			&:hover {
			  box-shadow: 0 1px 20px @text-color-gray;
			  transform: translateY(-8px);
			}
		  }
		}
	  }
	}
  }

  .box2 {
	background-color: @bg-main-color;

	.main:extend(.amins) {
	  .swiper {
		.w-main;
		.py(3rem, 3rem);

		.swiper-slide {
		  .flex(@d-flex: flex,@flex-direction: column);
		  border-radius: 0.3rem;
		  background-color: @bg-main-white;

		  & > .img {
			width: 100%;

			img {
			  border-top-right-radius: 0.3rem;
			  border-top-left-radius: 0.3rem;
			}
		  }

		  & > .title {
			display: flex;
			align-items: self-start;
			.fs-4;
			color: @text-color-black;
			.px(1rem, 1rem);
			margin-top: 1.5rem;
		  }

		  span {
			.span-ellipsis;
			.px(1rem, 1rem);
			margin-top: 0.5rem;
			margin-bottom: 0.5rem;
			color: @text-color-gray;
		  }
		}
	  }
	}
  }
}

//案例详情
.casedetails2 {
  .case_top {
	.flex(@d-flex: flex,@flex-direction: column,@a-items: center);
	background-color: @header-bg-color;
	color: @text-color-white;

	div:first-child {
	  .w-zhengti;
	  .flex(@d-flex: flex,@j-content: center,@a-items: center,@position: relative);

	  span {
		  font-size: calc(1.075rem + 1.5vw);
		position: absolute;
	  }
	}

	p {
	  .w-main;
	  .padd;
	  text-align: center;
	  .py(3rem, 3rem);
	}
  }

  .box1 {
	.main {
	  .flex(@d-flex: flex,@flex-direction: column,@a-items: center);
	  padding-bottom: 3rem;

	  p {
		  line-height: 2;
		img {
		  .py(3rem, 3rem);
		}

		.cen;
		.w-zhengti;

		span {
		  display: inline-block;
		  @media (min-width: 1280px) {
			width: 666px;
		  }
		  @media (max-width: 1279px) {
			width: 63.333333%;
		  }
		}
	  }

	  & > .data-list {
		.w-main;
		.flex(@d-flex: flex,@wrap:wrap);

		.data-item {
		  .col-6;
		  .px(1rem, 1rem);
		  .py(1.5rem, 1.5rem);
		  & > div {
			.flex(@d-flex: flex,@flex-direction: column);
			border-radius: 0.3rem;
			background-color: @bg-main-white;
			box-shadow: 0 0 3px -2px @text-color-gray;

			.img {
			  position: relative;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  overflow: hidden;
			  max-height: 19rem;
			  border-top-left-radius: 0.3rem;
			  border-top-right-radius: 0.3rem;

			  img {
				width: 100%;
				border-top-left-radius: 0.3rem;
				border-top-right-radius: 0.3rem;
				transition: width 2s;
				max-width: 200%;

				&:hover {
				  width: 150%;
				}
			  }
			}

			span, i {
			  .px(1rem, 1rem);
			}

			& > .title {
			  .fs-5;
			  display: flex;
			  align-items: self-start;
			  color: @text-color-black;
			  .py(1.5rem, 1.5rem);
			  .px(1rem, 1rem);
			}

			span {
			  .span-ellipsis;
			  color: @text-color-gray;
			}

			i {
			  .fs-1;
			  text-align: end;
			  .py(1rem, 1rem);
			  color: @text-color-croci;
			}

			&:hover {
			  box-shadow: 0 1px 20px @text-color-gray;
			  transform: translateY(-8px);
			}
		  }
		}
	  }
	}
  }

  .box2 {
	.main:extend(.mains) {
	  .swiper {
		.w-main;
		.py(3rem, 3rem);

		.swiper-slide {
		  @media (min-width: 468px) {
			display: flex;
			justify-content: center;
			align-items: center;
		  }
		  .fm {
			margin: 10px 0;
			font-size: 20px;
		  }
		  & > div {
			.flex(@d-flex: flex,@flex-direction: column);
			border-radius: 0.3rem;
			background-color: @bg-main-white;
			width: calc(100% / 3 - .5rem);
			margin: 0 .5rem;

			img {

			  border-top-right-radius: 0.3rem;
			  border-top-left-radius: 0.3rem;
			}

			.title {
			  align-items: self-start;
			  color: @text-color-black;
			  .fs-4;
			  .py(1.5rem, 0);
			  .px(1rem, 1rem);
			}

			span {
			  .px(1rem, 1rem);
			  color: @text-color-gray;
			  margin-top: 0.5rem;
			  margin-bottom: 0.5rem;
			  .span-ellipsis;
			}
		  }
		}
	  }
	}
  }

  img {
	width: auto;
	max-width: 100%;
  }
}

//联系我们
.contactus {
  .main {
	.flex(@d-flex: flex,@flex-direction: column,@a-items: center);
	margin-top: 3rem;
	//轮播图
	.con_swiper {
	  .w-zhengti;

	  .swiper {
		.py(3rem, 3rem);
	  }
	}

	//联系方式-公众号二维码
	.contact {
	  .flex(@d-flex: flex,@flex-direction: row,@j-content: space-between,@a-items: center);
	  .w-main;
	  .py(3rem, 3rem);

	  div:first-child {
		.flex(@d-flex: flex,@flex-direction: column);

		span {
		  .py(0.25rem, 0.25rem);
		  color: @text-color-gray;
		}

		span:nth-child(2) {
		  .fs-4;
		  color: @text-color-main-black;
		  .py(1rem, 1.5rem);
		}

		span:first-child {
		  padding-top: 0;
		}

	  }

	  img {
		.col-2;
	  }
	}

	//map-地图
	& > img {
	  .w-main;
	}
  }
}

//新闻动态
.journalism {
  .main:extend(.mains) {
	.flex(@d-flex: felx,@flex-direction: column,@a-items: center);

	.data-list {
	  .w-main;

	  .item {
		.flex(@d-flex: flex,@j-content: space-around,@a-items: center);
		.py(3rem, 3rem);
		border-bottom: 2px solid rgba(146, 146, 146, 0.25);

		&:last-child {
		  border-bottom: 0;
		}

		& > a {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  overflow: hidden;
		  width: 50%;
		  max-height: 21.5rem;
		  box-shadow: -10px 10px 20px hsla(@header-bg-color, 30%);
		  border-radius: 0.3rem;

		  img {
			border-radius: 0.3rem;
			transition: width 1s;
		  }

		  &:hover {
			img {
			  width: 130%;
			  transform: translate3d(0, 0, 0);
			}
		  }
		}

		div {
		  .flex(@d-flex: flex,@flex-direction: column);
		  .col-5;

		  span {
			color: @text-color-gray;
		  }

		  & > .title {
			color: @text-color-black;
			.fs-5;
			.py(1rem, 1rem);
		  }

		  & > .desc {
			.span-ellipsis(5);
			margin-bottom: 1rem;
		  }

		  & > a {
			.flex(@d-flex: flex,@flex-direction: row,@wrap: nowrap);
			.cu-po;
			color: @text-color-croci;

			span {
			  color: @text-color-croci;
			  padding-right: 0.5rem;
			}
		  }
		}
	  }
	}
  }
}

//新闻动态详情
.journalismdetails {
  max-width: 1280px;
  margin: 0 auto;

  .title {
	.flex(@d-flex: flex,@flex-direction: column,@a-items: center);
	.py(3rem, 3rem);

	span {
	  @media (min-width: 1280px) {
		/*width: 666px;*/
	  }
	  @media (max-width: 1279px) {
		/*width: 63.333333%;*/
	  }
	}

	span:first-child {
	  color: @text-color-gray;
	}

	span:last-child {
	  .fs-3;
	  padding-top: 1rem;
	  color: @text-color-main-black;
	}

  }

  .main {
	.flex(@d-flex: flex,@flex-direction: column,@a-items: center);
	padding-bottom: 3rem;
	//pre标签不保留空白字符换行，pre-wrap保留空白字符换行
	white-space: pre-line;
	font-size: 1rem;

	p {
	  img {
		.w-main;
		.py(3rem, 3rem);
	  }

	  .w-zhengti;
	  text-align: center;

	  span {
		display: inline-block;
		background-color: transparent;
		@media (min-width: 1280px) {
		  /*width: 666px;*/
		  line-height: 2
		}
		@media (max-width: 1279px) {
		  width: 63.333333%;
		}
	  }
	}
  }
}

//分页器样式开始
.clearfix {
  clear: both;

  &:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
  }

  .fl {
	float: left;
  }

  .fr {
	float: right;
  }
}

.pager {
  max-width: 800px;
  text-align: center;
  margin-bottom: 30px;
  display: inline-block;

  a {
	cursor: pointer;
  }

  a, span {
	/* 按钮内数字 */
	width: 45px;
	height: 40px;
	color: #8a8a8a;
	display: inline-block;
	line-height: 40px;
	float: left;
	font-size: 15px;
	text-decoration: none;
	margin: 0 2px;
	border-radius: 6px;

	&:hover {
	  border-color: @text-color-croci;
	  color: @text-color-croci;
	  position: relative;
	  z-index: 1;
	}
  }

  span.current {
	color: @text-color-croci;
	position: relative;
	z-index: 1;
  }

  .pg-prev {
	background-position: 7px -21px;

	&:hover {
	  background-position: 7px -21px;
	}
  }

  .pg-next {
	background-position: -21px -21px;

	&:hover {
	  background-position: -21px -21px;
	}
  }

  .pg-last {
	background-position: -21px 7px;

	&:hover {
	  background-position: -21px 7px;
	}
  }

  .pg-prev[disabled="true"] {
	cursor: default;

	&:hover {
	  cursor: default;
	}
  }

  .pg-next[disabled="true"],
  .pg-next[disabled="true"]:hover {
	cursor: default;
  }

  .pg-prev[disabled="true"],
  .pg-next[disabled="true"] {
	border-color: #eeeeee;
  }

  span.els {
	border-color: transparent;
  }

}

.pagerHtmlWrap {
  width: 800px;
  margin: 30px auto;

  .cc_cells {
	width: 100%;
	height: 35px;
	padding: 5px 0;
	border-bottom: 1px #cccccc solid;
  }

  .cc_cells a {
	color: #454545;
	font-size: 14px;
	line-height: 35px;
	text-decoration: none;
  }

  .cc_cells a span {
	display: inline-block;
	width: 25%;
	text-align: left;
	margin: 0;
  }
}

//分页器样式结束